<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>首页</title>
    <#include "header.ftl">
    <!-- 引入组件库 -->

    <style scoped lang="scss">
        .container {
            position: absolute;
            top: 0px;
            bottom: 0px;
            width: 100%;
        .topbar-wrap {
            height: 50px;
            line-height: 50px;
            background: #373d41;
            padding: 0px;
        .topbar-btn {
            color: #fff;
        }
        /*.topbar-btn:hover {*/
        /*background-color: #4A5064;*/
        /*}*/
        .topbar-logo {
            float: left;
            width: 59px;
            line-height: 26px;
        }
        .topbar-logos {
            float: left;
            width: 120px;
            line-height: 26px;
        }
        .topbar-logo img,
        .topbar-logos img {
            height: 40px;
            margin-top: 5px;
            margin-left: 2px;
        }
        .topbar-title {
            float: left;
            text-align: left;
            width: 250px;
            padding-left: 10px;
            border-left: 1px solid #000;
        }
        .topbar-account {
            float: right;
            padding-right: 12px;
        }
        .userinfo-inner {
            cursor: pointer;
            color: #fff;
            padding-left: 10px;
        }
        }
        .main {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            position: absolute;
            top: 50px;
            bottom: 0px;
            overflow: hidden;
        }
        aside {
            min-width: 50px;
            background: #333744;
        &::-webkit-scrollbar {
             display: none;
         }
        &.showSidebar {
             overflow-x: hidden;
             overflow-y: auto;
         }
        .el-menu {
            height: 100%;
            /*写给不支持calc()的浏览器*/
            height: -moz-calc(100% - 80px);
            height: -webkit-calc(100% - 80px);
            height: calc(100% - 80px);
            border-radius: 0px;
            background-color: #333744;
        }
        .el-submenu .el-menu-item {
            min-width: 60px;
        }
        .el-menu {
            width: 180px;
        }
        .el-menu--collapse {
            width: 60px;
        }
        .el-menu .el-menu-item,
        .el-submenu .el-submenu__title {
            height: 46px;
            line-height: 46px;
        }
        .el-menu-item:hover,
        .el-submenu .el-menu-item:hover,
        .el-submenu__title:hover {
            background-color: #C6E2FF;
        }
        }
        .menu-toggle {
            background: #4A5064;
            text-align: center;
            color: white;
            height: 26px;
            line-height: 30px;
        }
        .content-container {
            background: #fff;
            flex: 1;
            overflow-y: auto;
            padding: 10px;
            padding-bottom: 1px;
        .content-wrapper {
            background-color: #fff;
            box-sizing: border-box;
        }
        }
        }
    </style>
</head>
<!-- Add "scoped" attribute to limit CSS to this component only -->

<body>
<div id="app">

    <el-row class="container">
        <!--头部-->
        <el-col :span="24" class="topbar-wrap">
            <div class="topbar-logo topbar-btn">
                <a href="/"><img src="/img/logo.jpg" style="padding-left:8px;"></a>
            </div>
            <div class="topbar-logos" v-show="!collapsed">
                <a href="/"><img src="/img/logotxt.jpg"></a>
            </div>

            <div class="topbar-title">
                <span style="font-size: 18px;color: #fff;">U智远程教育平台-学生端</span>
            </div>

            <!-- 右上角 -->
            <div class="topbar-account topbar-btn">
                <el-dropdown trigger="click">
					<span class="el-dropdown-link userinfo-inner"><i class="iconfont icon-user"></i>{{ nickname }}  <i
                            class="iconfont icon-down"></i></span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <span style="color: #555;font-size: 14px;" @click="showStuInfo">个人信息</span>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <span style="color: #555;font-size: 14px;" @click="editPasswordVisible = true">修改密码</span>
                        </el-dropdown-item>
                        <el-dropdown-item divided @click.native="logoutUser">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-col>

        <!--中间-->
        <el-col :span="24" class="main">
            <!--左侧导航-->
            <aside :class="{showSidebar:!collapsed}">
                <!--展开折叠开关-->
                <div class="menu-toggle" @click.prevent="collapse">
                    <i class="iconfont icon-menufold" v-show="!collapsed"></i>
                    <i class="iconfont icon-menuunfold" v-show="collapsed"></i>
                </div>
                <!--导航菜单-->
                <#--<el-menu default-active="0" router :collapse="collapsed">-->
                    <#--<template v-for="(item,index) in $router.options.routes" v-if="item.menuShow">-->
                        <#--<el-submenu v-if="!item.leaf" :index="index+''">-->
                            <#--<template slot="title"><i :class="item.iconCls"></i><span style="color: red;" slot="title">{{item.name}}</span>-->
                            <#--</template>-->
                            <#--<el-menu-item v-for="term in item.children" :key="term.path" :index="term.path"-->
                                          <#--v-if="term.menuShow" :class="$route.path==term.path?'is-active':''">-->
                                <#--<i :class="term.iconCls"></i><span slot="title">{{term.name}}</span>-->
                            <#--</el-menu-item>-->
                        <#--</el-submenu>-->
                        <#--<el-menu-item v-else-if="item.leaf&&item.children&&item.children.length"-->
                                      <#--:index="item.children[0].path"-->
                                      <#--:class="$route.path==item.children[0].path?'is-active':''">-->
                            <#--<i :class="item.iconCls"></i><span style="color: #C71585;" slot="title">{{item.children[0].name}}</span>-->
                        <#--</el-menu-item>-->
                    <#--</template>-->
                <#--</el-menu>-->
                <el-row class="tac">
                    <el-col :span="12">
                        <h5>默认颜色</h5>
                        <el-menu
                                default-active="2"
                                class="el-menu-vertical-demo"
                                @open="handleOpen"
                                @close="handleClose">
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span>导航一</span>
                                </template>
                                <el-menu-item-group>
                                    <template slot="title">分组一</template>
                                    <el-menu-item index="1-1">选项1</el-menu-item>
                                    <el-menu-item index="1-2">选项2</el-menu-item>
                                </el-menu-item-group>
                                <el-menu-item-group title="分组2">
                                    <el-menu-item index="1-3">选项3</el-menu-item>
                                </el-menu-item-group>
                                <el-submenu index="1-4">
                                    <template slot="title">选项4</template>
                                    <el-menu-item index="1-4-1">选项1</el-menu-item>
                                </el-submenu>
                            </el-submenu>
                            <el-menu-item index="2">
                                <i class="el-icon-menu"></i>
                                <span slot="title">导航二</span>
                            </el-menu-item>
                            <el-menu-item index="3" disabled>
                                <i class="el-icon-document"></i>
                                <span slot="title">导航三</span>
                            </el-menu-item>
                            <el-menu-item index="4">
                                <i class="el-icon-setting"></i>
                                <span slot="title">导航四</span>
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col :span="12">
                        <h5>自定义颜色</h5>
                        <el-menu
                                default-active="2"
                                class="el-menu-vertical-demo"
                                @open="handleOpen"
                                @close="handleClose"
                                background-color="#545c64"
                                text-color="#fff"
                                active-text-color="#ffd04b">
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span>导航一</span>
                                </template>
                                <el-menu-item-group>
                                    <template slot="title">分组一</template>
                                    <el-menu-item index="1-1">选项1</el-menu-item>
                                    <el-menu-item index="1-2">选项2</el-menu-item>
                                </el-menu-item-group>
                                <el-menu-item-group title="分组2">
                                    <el-menu-item index="1-3">选项3</el-menu-item>
                                </el-menu-item-group>
                                <el-submenu index="1-4">
                                    <template slot="title">选项4</template>
                                    <el-menu-item index="1-4-1">选项1</el-menu-item>
                                </el-submenu>
                            </el-submenu>
                            <el-menu-item index="2">
                                <i class="el-icon-menu"></i>
                                <span slot="title">导航二</span>
                            </el-menu-item>
                            <el-menu-item index="3" disabled>
                                <i class="el-icon-document"></i>
                                <span slot="title">导航三</span>
                            </el-menu-item>
                            <el-menu-item index="4">
                                <i class="el-icon-setting"></i>
                                <span slot="title">导航四</span>
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                </el-row>


            </aside>

            <!--右侧内容区-->
            <!-- 上面导航  面包屑 -->
            <section class="content-container">
                <div style="height:50px">
                    <#--<el-breadcrumb separator-class="el-icon-arrow-right">-->
                        <#--<el-breadcrumb-item v-for="item in $route.matched" :key="item.name">-->
                            <#--<el-breadcrumb-item v-if="item.name == '主页'" :to="{ path: '/welcome' }">首页-->
                            <#--</el-breadcrumb-item>-->
                            <#--<el-breadcrumb-item v-else :to="item.path">{{ item.name }}</el-breadcrumb-item>-->
                        <#--</el-breadcrumb-item>-->
                    <#--</el-breadcrumb>-->
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                            <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                        </el-breadcrumb>
                </div>

                <div class="grid-content bg-purple-light">
                    <#--<el-col :span="24" class="content-wrapper">-->
                        <#--<transition name="fade" mode="out-in">-->
                            <#--<router-view></router-view>-->
                        <#--</transition>-->
                    <#--</el-col>-->
                </div>
            </section>
        </el-col>
        <!--点击个人信息弹出该对话框 -->
        <el-dialog title="个人信息" :visible.sync="showStuInfoVisible">
            <el-form :model="stuInfoForm">
                <el-form-item label="姓名">
                    <el-input style="width: 500px;" v-model="stuInfoForm.teacherRealname"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-input style="width: 500px;" v-model="stuInfoForm.teacherSex"></el-input>
                </el-form-item>
                <el-form-item label="民族">
                    <el-input style="width: 500px;" v-model="stuInfoForm.teacherNational"></el-input>
                </el-form-item>
                <el-form-item label="学历">
                    <el-input style="width: 500px;" v-model="stuInfoForm.teacherRecord"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input style="width: 500px;" v-model="stuInfoForm.teacherEmail"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input style="width: 500px;" v-model="stuInfoForm.teacherPhone"></el-input>
                </el-form-item>

            </el-form>
            </el-table>
        </el-dialog>
        <!-- 修改密码 -->
        <el-dialog title="个人信息" :visible.sync="editPasswordVisible">
            <el-form :model="ruleForm2" status-icon  ref="ruleForm2" label-width="100px"
                     class="demo-ruleForm">
                <el-form-item label="原密码" prop="prePass">
                    <el-input type="password" v-model="ruleForm2.prePass" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="pass">
                    <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitEditPassForm">提交</el-button>
                    <el-button @click="resetForm('ruleForm2')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </el-row>

</div>
<#include "footer.ftl">

<script>
    let _this = new Vue({
        el: '#app',
        data: {
            ruleForm2: {
                pass: '',
                checkPass: '',
                prePass: ''
            },
            editPasswordVisible: false,
            isPhoneHidden: true,
            isEmailHidden: true,
            isInputEmailHidden: false,
            isInputPhoneHidden: false,
            stuInfoForm: {},
            nickname: '',
            collapsed: false,
            showStuInfoVisible: false,
        },
        created: function () {

        },
        mounted() {
            let user = localStorage.getItem('teacher-user');
            if (user) {
                user = JSON.parse(user);
                this.nickname = user.teacherRealname || '';
            }
        },
        methods: {
            /*修改密码*/
            submitEditPassForm() {
                let loginParams = {
                    teacherId: this.stuInfoForm.teacherId,
                    teacherPwd: this.ruleForm2.pass
                };
                $.ajax({
                    type:'post',
                    url:'',
                    data: loginParams,
                    dateType:'json',
                    success:function (r) {

                    }
                })




                console.log(loginParams);
                        modfiyPwd(loginParams).then(res => {

                            if (res.status == 200) {
                                this.$message({
                                    message: res.message,
                                    type: 'success'
                                });
                                this.editPasswordVisible = false;
                            } else {
                                this.$message({
                                    message: res.message,
                                    type: 'info'
                        })
                    }
                    ;
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消修改'
                    });
                });

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            hiddenChange1() {
                this.isEmailHidden = false,
                        this.isInputEmailHidden = true

            },
            hidddenChange2() {
                this.isPhoneHidden = false,
                        this.isInputPhoneHidden = true
            },
            handleOpen() {
                //console.log('handleopen');
            },
            handleClose() {
                //console.log('handleclose');
            },
            //折叠导航栏
            collapse: function () {
                this.collapsed = !this.collapsed;
            },
            showMenu(i, status) {
                this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-' + i)[0].style.display = status ? 'block' : 'none';
            },

            /*显示个人信息*/
            showStuInfo() {
                let user = localStorage.getItem('teacher-user');
                if (user) {
                    user = JSON.parse(user);
                    console.log(user.teacherId);
                }

                console.log(user.teacherId);
                this.stuInfoForm = user;
                console.log(this.stuInfoForm);
                console.log(this.stuInfoForm.teacherId);
                this.showStuInfoVisible = true;

            },
            /*submitForm(stuInfoForm) {
              this.$refs[stuInfoForm].validate((valid) => {
                let params = {studentEmail: stuInfoForm.studentEmail,studentPhone: stuInfoForm.studentPhone};
                if (valid) {
                  TeachermanageUp(params).then(res => {
                    let {status, message} = res ;
                    if (res.status == 200) {
                      this.$message({
                        message: message,
                        type: 'success'
                      });
                      this.showStuInfoVisible= false;

                    } else {
                        this.$message.error('修改失败');
                    }
                  })
                } else {
                  console.log('error submit!!');
                  return false;
                }
              })
            },*/

            /*退出*/
            logoutUser() {
                let that = this;
                this.$confirm('确认退出吗?', '提示', {
                    confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    //确认
                    that.loading = true;
                    logout().then((res) => {
                        let {
                            status,
                            message
                        } = res;
                        if (status == 200) {
                            that.loading = false;
                            localStorage.removeItem('teacher-user');
                            that.$router.go('/login'); //用go刷新
                            this.$message({
                                message: '您已成功退出',
                                type: 'success'
                            });
                        } else {
                            this.$message.error('500:退出失败');
                        }
                    }, function (err) {
                        that.loading = false;
                        that.$message.error({
                            showClose: true,
                            message: err.toString(),
                            duration: 2000
                        });
                    }).catch(function (error) {
                        that.loading = false;
                        console.log(error);
                        that.$message.error({
                            showClose: true,
                            message: '请求出现异常',
                            duration: 2000
                        });
                    });
                });
            }
        }
    })
</script>


</body>
</html>